<template>
	<view class="search-location-wrapper">
		<view class="bg">
			<!-- 搜索框 start-->
			<view class="search-select">
				<view class="search-select-icn">
					<image class="search-select-icnimg" src="/static/other/searchicn.png" mode=""></image>
				</view>
				<view class="location" @click="navigateToRegionsearch">
					<view class="location-title">
						{{currentCity}}
					</view>
					<view class="location-icon">
						<image class="location-icon-img" src="/static/other/dowen.png" mode=""></image>
					</view>
					<text v-if="locationStatus" class="location-status">{{locationStatus}}</text>
				</view>
				<view class="">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键词" clearButton="none"
						cancelButton="none" @confirm="search" />
				</view>
			</view>
			<!-- 搜索框 end-->
		</view>
	</view>
</template>

<script>
	// 导入位置管理工具类
	import locationManager from '../../utils/location.js';
	export default {
		name: 'search-location',
		data() {
			return {
				currentCity: '北京市',
				locationStatus: ''
			}
		},
		mounted() {
			// 首先从存储中检查是否有已选择的城市
			const selectedCity = uni.getStorageSync('selectedCity');
			if (selectedCity) {
				this.currentCity = selectedCity;
			} else {
				// 只有在用户未手动选择城市时，才自动执行定位
				setTimeout(() => {
					this.getUserLocation();
				}, 500);
			}

			// 监听城市更新事件
			uni.$on('updateCity', (city) => {
				this.currentCity = city;
			});
		},
		// 组件卸载时移除事件监听
		destroyed() {
			uni.$off('updateCity');
		},
		methods: {
			// 点击城市区域，跳转到城市选择页面
			navigateToRegionsearch() {
				uni.navigateTo({
					url: '/pages/province/province'
				});
			},
			// 获取用户位置
			async getUserLocation() {
				// 先检查用户是否已经手动选择了城市
				const selectedCity = uni.getStorageSync('selectedCity');
				if (selectedCity) {
					this.locationStatus = '';
					return;
				}

				// 在用户未手动选择城市的情况下，使用定位功能确定城市
				this.locationStatus = '定位中...';

				try {
					// 使用locationManager获取用户真实定位
					const location = await locationManager.getUserLocation();
					console.log('✅ 获取用户位置成功:', location);

					// 如果有城市信息，使用定位的城市
					if (location.cityInfo && location.cityInfo.city) {
						this.locationStatus = '';
						// 只有在用户未手动选择城市的情况下，才设置定位城市
						if (!uni.getStorageSync('selectedCity')) {
							this.currentCity = location.cityInfo.city;
						}
					} else {
						console.warn('⚠️ 未获取到城市信息，使用默认城市');
						this.locationStatus = '';
						if (!uni.getStorageSync('selectedCity')) {
							this.currentCity = '北京市';
						}
					}
				} catch (error) {
					console.error('❌ 获取位置失败:', error);
					this.locationStatus = '定位失败';
					// 定位失败时，继续使用默认城市
				}
			},
			// 搜索功能
			search(e) {
				console.log('搜索内容:', e);
				// 触发搜索事件，让父组件处理搜索逻辑
				this.$emit('search', e);
			}
		}
	}
</script>

<style scoped>
	/* 整体布局 */
	.search-location-wrapper {
		width: 100%;
	}

	.bg {
		width: 100%;
		/* 优化渐变背景 */
		/* background: linear-gradient(135deg, #3B82F6 0%, #4F46E5 100%); */
		/* background-color: #f5f5f5; */
		color: white;
		/* 添加顶部内边距，避免内容与顶部导航栏重叠 */
		/* padding-top: 20rpx; */
	}

	/* 搜索选择区域 */
	.search-select {
		height: 110rpx;
		/* background-color: #fff; */
		/* border-radius: 0 0 24rpx 24rpx; */
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		/* box-shadow: 0 1rpx 2rpx 0 rgba(0, 0, 0, 0.05); */
	}

	.search-select-icn {
		width: 30rpx;
		height: 30rpx;
		display: inline-flex;
		/* padding-top: 5rpx; */
	}

	.search-select-icnimg {
		width: 30rpx;
		height: 30rpx;
	}

	.location {
		width: 130rpx;
		margin-right: 10rpx;
		position: relative;
	}

	.location-title {
		float: left;
		font-size: 30rpx;
		padding-right: 10rpx;
		color: #000;
		display: inline-block;
	}

	.location-status {
		position: absolute;
		font-size: 20rpx;
		color: #999;
		top: 50rpx;
		left: -20rpx;
		width: 100%;
		text-align: center;
	}

	.location-icon {
		width: 30rpx;
		height: 30rpx;
		display: inline-flex;
		padding-top: 5rpx;
	}

	.location-icon-img {
		width: 30rpx;
		height: 20rpx;
	}

	.uni-select {
		min-width: 545rpx;
		min-height: 55rpx !important;
		border: 0rpx solid #fff !important;
		font-size: 28rpx;

	}

	.uni-searchbar {
		width: 515rpx !important;
	}

	/* 搜索框样式优化 */
	.uni-search-bar {
		border-radius: 16rpx !important;
		background-color: #F3F4F6 !important;
		width: 515rpx !important;
	}

	.uni-search-bar__input {
		background-color: transparent !important;
		font-size: 28rpx !important;
		width: 515rpx !important;
	}
</style>